<template>
  <div class="travel">
    <div class="top">
      <img src="../../assets/images/travel/out.png" width="100%" alt="">
      <div class="trabackhome" @click="BackHome">返回疫情动态</div>
    </div>
    <!--内容开始-->
    <div class="body-tra">
      <div class="tracity">
        <div class="tratitle">
          <img src="../../assets/images/travel/huo.png" alt="">
          <span class="tle_m">出行防疫政策查询</span>
          <span class="tle_tip">更多地区持续添加中</span>
        </div>
        <div class="trasele">
          <van-field
              v-model="goCity"
              is-link
              readonly
              label="出发城市"
              placeholder="请选择所在地区"
              @click="show = true"
          />
          <van-popup v-model="show" round position="bottom">
            <van-cascader
                v-model="from"
                title="请选择出发城市"
                :options="options"
                @close="show = false"
                @finish="onFinish"
            />
          </van-popup>

          <van-field
              v-model="toCity"
              is-link
              readonly
              label="到达城市"
              placeholder="请选择所在地区"
              @click="show2 = true"
          />
          <van-popup v-model="show2" round position="bottom">
            <van-cascader
                v-model="to"
                title="请选择到达城市"
                :options="options"
                @close="show2 = false"
                @finish="toFinish"
            />
          </van-popup>
        </div>
        <!-- 查询按钮 -->
        <div class="search">
          <van-button
              type="primary"
              size="large"
              v-preventReClick
              @click="search"
          >查询疫情防疫
          </van-button>
        </div>
      </div>
    </div>
    <div class="tratip">
      <ul>
        <li>最新</li>
        <li>多地出现确诊病例，关键时期请接力倡议</li>
        <li>></li>
      </ul>
    </div>
    <!--政策信息-->
    <div class="look" v-show="showlook">
      <div class="out_z">
        <div class="tra_Info">
          <div class="tra_ci"
               :style=from_style>
            <span class="ci_name">出{{ from_info.city_name }}</span>
            <span class="risk">{{ from_riskInfo }}</span>
          </div>
          <div class="tra_ciInfo">
            <div class="ci_info">
              {{ from_info.out_desc }}
            </div>
            <div class="showall" @click="showall">
              <span>展开全部</span>
              <img src="../../assets/images/travel/show_arrow.png" alt="">
            </div>
          </div>
        </div>
        <div class="tra_Info">
          <div class="tra_ci"
               :style=to_style>
            <span class="ci_name">进{{ to_info.city_name }}</span>
            <span class="risk">{{ to_riskInfo }}</span>
          </div>
          <div class="tra_ciInfo">
            <div class="ci_info">
              {{ to_info.high_in_desc }}{{ to_info.low_in_desc }}
            </div>
            <div class="showall" @click="showall">
              <span>展开全部</span>
              <img src="../../assets/images/travel/show_arrow.png" alt="">
            </div>
          </div>
        </div>
      </div>
      <div class="out_f">
        <div class="tra_Info">
          <div class="tra_ci" :style=to_style>
            <span class="ci_name">出{{ to_info.city_name }}</span>
            <span class="risk">{{ to_riskInfo }}</span>
          </div>
          <div class="tra_ciInfo">
            <div class="ci_info">
              {{ to_info.out_desc }}
            </div>
            <div class="showall" @click="showall">
              <span>展开全部</span>
              <img src="../../assets/images/travel/show_arrow.png" alt="">
            </div>
          </div>
        </div>
        <div class="tra_Info">
          <div class="tra_ci"
               :style=from_style>
            <span class="ci_name">进{{ from_info.city_name }}</span>
            <span class="risk">{{ from_riskInfo }}</span>
          </div>
          <div class="tra_ciInfo">
            <div class="ci_info">
              {{ from_info.high_in_desc }}{{ from_info.low_in_desc }}
            </div>
            <div class="showall" @click="showall">
              <span>展开全部</span>
              <img src="../../assets/images/travel/show_arrow.png" alt="">
            </div>
          </div>
        </div>
        <div class="prompt">
          数据整理自官方公布的消息，仅供参考。若前往某地街道社区或村镇，建议直接咨询当地防疫部门。如有更新或错漏，请以当地防疫部门最新政策为准。
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="f_title">
        <img src="../../assets/images/travel/fang.png" alt="">
        <p>出行防护贴士</p>
      </div>
      <van-tabs class="f_card" v-model="active" type="card" color="#4169e2" title-inactive-color="black">
        <van-tab title="火车"><img src="../../assets/images/travel/1.png" alt=""></van-tab>
        <van-tab title="飞机"><img src="../../assets/images/travel/2.png" alt=""></van-tab>
        <van-tab title="客运汽车"><img src="../../assets/images/travel/3.png" alt=""></van-tab>
        <van-tab title="自驾"><img src="../../assets/images/travel/4.png" alt=""></van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import api from "../../api";

export default {
  name: "Travel",
  data() {
    return {
      active: 0,//默认tab
      show: false, //弹框状态  false隐藏 true显示
      show2: false, //弹框状态  false隐藏 true显示
      goCity: "", //出发的值
      toCity: "", //到达的值
      from: "", //出发的id值
      to: "",//到达的id值
      from_info: '',//出发的信息
      to_info: '',//到达的信息
      from_riskInfo: '',//出发的地区风险信息
      to_riskInfo: '',//到达的地区风险信息
      from_style: '',//出发的地区样式
      to_style: '',//到达的地区样式
      showlook: false,//是否查看出行政策信息
      // 选项列表，children 代表子选项，支持多级嵌套
      options: [
        {
          text: "浙江省",
          value: "330000",
          children: [{text: "杭州市", value: "330100"}],
        },
        {
          text: "江苏省",
          value: "320000",
          children: [{text: "南京市", value: "320100"}],
        },
      ],
    };
  },
  methods: {
    // 全部选项选择完毕后，会触发 finish 事件
    onFinish({value, selectedOptions, tabIndex}) {
      this.show = false;
      this.goCity = selectedOptions.map((option) => option.text).join("/");
    },
    toFinish({value, selectedOptions, tabIndex}) {
      this.show2 = false;
      this.toCity = selectedOptions.map((option) => option.text).join("/");
    },
    search() {
      if (this.from == '' && this.to == '') {
        this.$notify({
          message: '请输入城市信息完整',
          color: '#ad0000',
          background: '#ffe1e1',
          duration: 500,
        });
        return;
      }
      console.log("查询城市疫情", this.from, this.to);
      // 请求接口
      api.getTravelQuery({
        from: this.from,
        to: this.to
      })
          .then(res => {
            console.log('-查询城市疫情-', res.data);
            this.from_info = res.data.result.from_info;//出行城市信息
            this.to_info = res.data.result.to_info;//到达城市信息
            let from_risk = res.data.result.from_info.risk_level;//出行城市风险等级
            let to_risk = res.data.result.to_info.risk_level;//到达城市风险等级
            // 0:暂无 1:低风险 2:中风险 3:高风险 4:部分地区中风险
            // 5:部分地区高风险 6:部分地区中、高风险
            //城市风险信息
            this.from_riskInfo = from_risk == 0 ? '暂无' : from_risk == 1 ? '低风险' : from_risk == 2 ? '中风险' : from_risk == 3 ? '高风险' : from_risk == 4 ? '部分地区中风险' : from_risk == 5 ? '部分地区高风险' : from_risk == 6 ? '部分地区中、高风险' : '';
            this.to_riskInfo = to_risk == 0 ? '暂无' : to_risk == 1 ? '低风险' : to_risk == 2 ? '中风险' : to_risk == 3 ? '高风险' : to_risk == 4 ? '部分地区中风险' : to_risk == 5 ? '部分地区高风险' : to_risk == 6 ? '部分地区中、高风险' : '';
            //城市样式
            this.from_style = from_risk > 1 ? 'background-color: #f57676;' : 'background-color: #40cca7;'
            this.to_style = to_risk > 1 ? 'background-color: #f57676;' : 'background-color: #40cca7;'
            this.showlook = true;
            //显示或隐藏展开全部
            this.$nextTick(() => {
              let ci_in = document.getElementsByClassName('ci_info')
              for (let i = 0; i < ci_in.length; i++) {
                // ci_in[i].style.display = '-webkit-box';
                ci_in[i].nextSibling.style.display = ''
                if (ci_in[i].scrollHeight <= ci_in[i].clientHeight) {
                  ci_in[i].nextSibling.style.display = 'none'
                }
              }
            })
          });
    },
    //展开操作
    showall(event) {

      console.log(event);
      console.log(event.currentTarget);
      console.log(event.currentTarget.previousSibling);
      //获取当前绑定的第一个子元素span
      let currentChildspan=event.currentTarget.firstElementChild;
      //获取当前绑定的最后一个子元素img
      let currentChildimg=event.currentTarget.lastElementChild;
      //获取点击元素的上一个兄弟元素
      let ci_info = event.currentTarget.previousSibling;
      console.log('offset='+ci_info.offsetHeight+'px')
      console.log('scrool='+ci_info.scrollHeight+'px');
      console.log('client='+ci_info.clientHeight+'px');
      if (ci_info.scrollHeight > ci_info.clientHeight) {
        ci_info.style.display = 'inline-block';
        currentChildspan.innerText = '收起'
        currentChildimg.style.transform = 'rotate(180deg)'

      } else {
        ci_info.style.display = '';
        currentChildspan.innerText = '展开全部'
        currentChildimg.style.transform = 'rotate(0deg)'
      }
    },
    //返回home页面
    BackHome(){
      this.$router.push({
        name: 'home'
      })

    }
  },
  created() {
    api.getTravel().then(res => {
      console.log("=====", res.data);
      let result = res.data.result;
      //结构数据{text: "",value: "",children: [],},
      let arr = [];
      result.forEach(item => {
        let obj = {}
        obj.text = item.province;//省份名称
        obj.value = item.province_id;//省份名称
        obj.text = item.province;//省份名称
        obj.children = [];//二级区域
        item.citys.forEach(ele => {
          let child = {}
          child.text = ele.city;
          child.value = ele.city_id;
          //添加到obj.children=[]
          obj.children.push(child);
        })
        arr.push(obj)
      });
      this.options = arr;
      console.log("城市", this.options);
    })
  },
}
</script>

<style scoped>
.travel {
  background-color: #f8f8f8;
  position: relative;

}

.top {
  position: relative;
}

.top .trabackhome {
  position: absolute;
  top: 0.24rem;
  right: 0.32rem;
  padding: 0.1rem 0.26rem;
  color: #fff;
  font-weight: 400;
  font-size: .11rem;
  line-height: normal;
  background-color: rgba(19, 15, 133, .5);
  border-radius: 0.2rem;
}

/*body开始*/
.body-tra {
  position: absolute;
  top: 2.3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.body-tra .tracity {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0.4rem;
  padding: 0.15rem 0.1rem;
  color: #333;
  background-color: #fff;
  border: 0.005rem solid #ebebeb;
  border-radius: 0.2rem;
  box-shadow: 0 0.02rem 0.06rem 0 rgb(0 0 0 / 5%);

}

.tracity .tratitle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tracity .tratitle img {
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.1rem;
}

.tracity .tratitle .tle_m {
  flex-grow: 1;
  font-weight: 700;
  font-size: 0.3rem;
}

.tracity .tratitle .tle_tip {
  color: #999;
  font-weight: 400;
  font-size: .12rem;
}

/deep/ .van-cell {
  background-color: #f8f8f8;
}

.tracity .trasele {
  margin: 0.2rem;
  padding: 0.2rem;
  border-radius: 0.2rem;
}

.tratip {
  padding: 0.9rem 0.3rem 0.2rem;
}

.tratip ul {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  height: 0.8rem;
  background-color: #ffffff;
  border-radius: 0.1rem;
}

.tratip ul li:nth-child(1) {
  padding: 0.02rem 0.03rem;
  background-color: #ffefed;
  border-radius: 6px;
  color: #f74c31;
}

.tratip ul li:nth-child(3) {
  color: #cccccc;
}

.search {
  width: 90%;
}

/*out_z和out_f开始*/
.travel .out_z, .out_f {
  margin: 0 0.3rem 0.2rem;
  background-color: #fff;
  border-radius: 0.06rem;
}


.tra_Info {
  display: flex;
  flex-direction: column;
}

.ci_name {
  color: #fff;
  font-weight: 700;
  font-size: 0.4rem;
}

.tra_ci {
  line-height: 0.8rem;
  margin: 0.3rem 0.5rem 0.1rem;
  border-radius: 0.1rem;
  background-color: #40cca7;
}

.tra_ci .risk {
  margin: 0.2rem;
  color: #ffffff;
}

.tra_ciInfo {
  background-color: #f7f7f7;
  margin: 0.2rem 0.5rem;
  border-radius: 0.1rem;
  padding: 0.06rem;
}

.ci_info {
  display: -webkit-box; /*弹性伸缩盒子*/
  -webkit-box-orient: vertical; /*子元素垂直排列*/
  -webkit-line-clamp: 5; /*显示的行数*/
  overflow: hidden; /*溢出部分隐藏*/
  text-overflow: ellipsis;
  line-height: 0.4rem;
  color: #4d4d4d;
}

.showall {
  margin-top: 0.06rem;
  color: grey;
  font-size: .12rem;
  cursor: pointer;
}

.showall img {
  width: 0.12rem;
  height: 0.12rem;
  margin-left: 0.04rem;
}

.prompt {
  color: #999;
  font-size: .2rem;
  line-height: 1.375;
  margin: 0 0.5rem;
  padding-bottom: 0.2rem;
}

/*footer开始*/
.footer {
  margin: 0.1rem 0.3rem 0.2rem;
  padding: 0.15rem 0.12rem;
  background-color: #fff;
  border-radius: 0.06rem;
}

.footer .f_title {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 0.3rem;
}

.footer .f_title img {
  width: 0.4rem;
}

.footer .f_title p {
  margin: 0 0 0 0.04rem;
  color: #333;
  font-weight: 700;
  font-size: .3rem;
  line-height: 1.13;
}

.footer .f_card img {
  width: 100%;
  margin-top: 0.3rem;
}
</style>
